<template>
  <div class="goods-item flex" @click="goodsNavTo(purchaseItem.id)">
    <div class="left-goods">
      <img :src="purchaseItem.thumb" />
    </div>
    <div class="right-goods">
      <div class="title ell">{{ purchaseItem.title }}</div>
      <div class="company-name flex-a-c flex-j-sb">
        <div class="company-label flex-a-c">
          <!-- <span class="iconfont icon-info_store"></span> -->
          <img :src="purchaseItem.thumb" alt="">
          <span class="name">{{ purchaseItem.name || purchaseItem.brand_name }}</span>
        </div>
        <!-- <span class="company-sum">{{ purchaseItem.show_sales }}人已购</span> -->
      </div>
      <div class="goods-price">
        <span class="price" v-if="purchaseItem.product_price">￥{{ purchaseItem.product_price }}</span>
        <span class="price" v-if="purchaseItem.has_many_options">￥{{ purchaseItem.has_many_options[0] && purchaseItem.has_many_options[0].product_price }}</span>
        <span class="original-price" v-if="(purchaseItem.market_price != 0) && purchaseItem.has_many_options && purchaseItem.has_many_options[0].product_price != purchaseItem.market_price">￥{{ purchaseItem.market_price }}</span>
        <span class="original-price" v-if="(purchaseItem.market_price != 0) && purchaseItem.product_price && (purchaseItem.product_price != purchaseItem.market_price)">￥{{ purchaseItem.market_price }}</span>
      </div>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "goodsItem",
  props: {
    purchaseItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    city: {
      type: String
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  mounted() {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goodsNavTo(id) {
      this.$router.push(this.fun.getUrl("sachertorteGoods", {}, { id: id, city: this.city }));
    }
  }
};
</script>
<style scoped lang="scss">
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .goods-list .goods-item:last-child {
  margin:0;
} */
.goods-list {
  .left-goods {
    width: 10.69rem;
    height: 10.69rem;
    // padding: 0 .5rem 0 0;
    border-radius: 0.5rem 0.5rem 00 0;

    img {
      width: 10.69rem;
      height: 10.69rem;
      border-radius: 0.5rem 0.5rem 00 0;
    }
  }
}

.right-goods {
  flex: 1;
  overflow: hidden;
  padding: 0.25rem 0.72rem 0.75rem 0.5rem;
  box-sizing: border-box;

  .title {
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333;
    padding: 0.4375rem 0 0.75rem 0;
  }
}

.company-name {
  margin: 0 0 0.75rem 0;

  .company-label {
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 100%;
      margin-right: 0.25rem;
    }
    // .icon-info_store {
    //   color: #e3494e;
    //   font-size: 1rem;
    //   line-height: 1rem;
    // }
    .name {
      font-size: 0.75rem;
      line-height: 1rem;
      padding: 0 0 0 0.125rem;
      color: #999;
    }
  }
}

.company-sum {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #999;
}

.goods-price {
  text-align: left;

  .price {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.25rem;
    color: #e32323;
    padding: 0 0.25rem 0 0;
  }
}

.goods-price {
  .original-price {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #999;
    text-decoration: line-through;
  }
}
</style>
